import cooApp, {
    Widget,
    basicWidgets,
    Util,
    ui,
    coolink,
} from 'coolink-ts'
import { Colors } from '../../config'
import { px } from '../../base/func'
import Center from '../../widgets/Center'
import baseinfo from '../../base/baseInfo'
const { Page, AppBar, Container, Text, Button, Image, Input } = basicWidgets

export default class HomePage extends Widget<any, any> {
    state = {

        rule: '',
        backgroundGradient: {
            colors: [0xFF9C04D0, 0xFFFF60D5],
            type: 'linear',
            begin: 'centerLeft',
            end: 'centerRight'
        },
        boxShadow: {
            color: Colors.Black,
            blurRadius: 24,
            spreadRadius: 0,
        }
    }

    widgetDidMount() {
        cooApp.pageDidShow()
        this.showRules();

    }

    pageDidPopNext() {
        let { getRuleInfo } = baseinfo.ruleInfo;
        let _curRule: any = getRuleInfo();
        if (_curRule) {
            this.setState({ rule: _curRule });
        }
    }

    showRules = async () => {
        let _localRule = await coolink.storage.getKey('singleRule');
        if (_localRule.value) {
            this.setState({ rule: _localRule.value });
        } else {
            let _defaultRule = '1、阅读游戏规则,点击【进入游戏】进入转盘页面。2、【TV端联动】即可实现两端同步展示,点击【开始游戏】,游戏开始。3、活动细则请找主办方确认。';
            this.setState({ rule: _defaultRule });
        }
    }
    gotowheelPage() {
        cooApp.pushPage('wheelPage');
    }

    render() {
        const appbarHeight = ui.appbarHeight;
        const statusBarHeight = Math.round(ui.statusBarHeight);
        const bottomBarHeight = ui.bottomBarHeight;
        const clientHeight = ui.screenHeight - statusBarHeight - appbarHeight - bottomBarHeight;
        return (
            <Page>
                <Container relative={true} width={ui.screenWidth} height={ui.screenHeight}>
                    <Image absolute={{ top: 0, left: 0 }} fit="fill" src='https://coolink.coocaa.com/applet/coo-turns/homepageBg.png' height={ui.screenHeight} width={ui.screenWidth}></Image>
                    <Container relative={true} absolute={{ top: 0, left: 0 }} width={ui.screenWidth} height={clientHeight} >
                        <Container absolute={{ top: px(100) }} width={ui.screenWidth} height={px(130)} justifyContent="center" alignItems="center">
                            <Container width={px(350)}>
                                <Text size={20} height={px(25)} margin={{ bottom: px(5) }} color={Colors.White}>活动规则</Text>
                                <Text size={16} disabled={true} height={px(100)} wrap={true} color={Colors.White}>
                                    {this.state.rule}
                                </Text>
                            </Container>
                        </Container>
                        <Container absolute={{ bottom: px(100) }} width={ui.screenWidth} height={px(56)} justifyContent="center" alignItems="center">
                            <Button
                                width={px(270)}
                                height={px(56)}
                                borderRadius={px(25)}
                                backgroundGradient={this.state.backgroundGradient as any}
                                boxShadow={this.state.boxShadow}
                                onTap={() => this.gotowheelPage()}
                            >
                                <Text text="进入游戏" color={0xffffffff} size={px(20)}></Text>
                            </Button>
                        </Container>

                    </Container>
                </Container>
            </Page >
        )
    }
}
